<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    html,
    body {
        background-color: #D55345;
    }

    .placeholder_div {
        background-color: #D55345;
    }

    .padding_white {
        width: 100%;
        background-color: #D55345;
    }

    .user_tx {
        width: 100%;
        height: 3rem;
        text-align: center;
        padding-top: 2.125rem;
    }

    .user_tx img {
        width: 3rem;
        height: 3rem;
        border-radius: 100px;
    }

    .qrcode_div {
        width: 100%;
        height: 11rem;
        background-color: #D55345;
        position: relative;
    }

    /* .qrcode_div .angle_img {
        width: 11rem;
        height: 11rem;
        position: absolute;
        margin: 0 0 0 4rem;
    } */

    .qrcode_div .qrcode_img {
        width: 11rem;
        height: 11rem;
        position: absolute;
        /* margin: 2.25rem 0 0 0; */
        background-color: #D55345;
        left: 0;
        right: 0;
        margin: 2.25rem auto 0 auto;
    }

    .text {
        margin-top: 12.75rem;
        text-align: center;
        font-size: 0.6rem;
        color: #FFFFFF;
        font-family: PingFangSC-Regular;
        font-weight: Regular;
        Opacity: 40%;
        /* margin-left: 6rem; */
    }

    .success_div {
        text-align: center;
    }

    .success_div img {
        width: 3rem;
        height: 3rem;
        margin-top: 3rem;
    }

    .success_div p {
        margin-top: 0.8rem;
        font-size: 0.8rem;
        color: #303030;
    }

    .success_div .btn {
        width: 95%;
        margin: 2rem 2.5% 0 2.5%;
        border-radius: 0.5rem;
        background-color: #fd6252;
        text-align: center;
        color: #fff;
        font-size: 1rem;
        height: 2rem;
        line-height: 2rem;
    }
</style>

<body>
    <div  id="app" v-cloak>
        <!-- <div class="placeholder_div"></div> -->
        <div class="padding_white">
            <div class="user_tx">
                <img :src="image" alt="">
            </div>
            <p style="text-align: center;font-size: 0.8rem;color: #FFFFFF;padding: 0.5rem 0 0.4rem 0;">{{userName}}</p>

            <p style="margin:0  auto;background-color: #FFDBAE; width: 60px; height: 22px; border-radius: 2px; color: #B84C41;
            font-size: 0.65rem; display: flex; align-items: center; justify-content: center;">{{zhicheng}}</p>

            <div class="qrcode_div">
                <!-- <img class="angle_img" src="../image/qrcode_red_angle.png" alt=""> -->
                <img class="qrcode_img" :src="base64_img" alt="">
            </div>

            <div class="text">
                <p>用户端APP扫描上方二维码,使用APP向我发起咨询</p>
            </div>
        </div>

        <!-- <div class="success_div" v-else>
            <img src="../image/icon_success.png" alt="">
            <p>扫码成功</p>
            <div class="btn" @click="closeFrm()">完成</div>
        </div> -->
    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();

        get_ajax("user/face", {
            userId: $api.getStorage("emp").userId
        }, function (res, err) {
            if (res.code == 200) {
                // alert(JSON.stringify(res))
                app.base64_img = "data:image/png;base64," + res.data.img
                app.keys = res.data.key
            } else {
                // alert("网络不通畅，请稍后再试！")
            }
        })

        get_ajax("doctor/view", {
            userId: $api.getStorage("emp").userId,
        }, function (res, err) {
            // alert(JSON.stringify(res))
            app.userName = res.data.name
            app.image = IMAGE_HTTP + res.data.avatar
            app.zhicheng = res.data.jobtitle
        })


    }
    // var time = setInterval(function () {
    //     states()
    // }, 5000);
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            // qrcode: true,
            base64_img: "",
            keys: "",
            userName: '',
            image: '../image/user_avater.png',
            zhicheng: '',
        },
        methods: {
            closeFrm: function () {
                api.openWin({
                    name: "kaifang_win",
                    url: "widget://html/fangan/kaifang_win.html",
                })
            }
        },

    })

    // function states() {
    //     get_ajax("user/face-check", {
    //         keys: app.keys
    //     }, function (res, err) {
    //         if (res.data == 1) {
    //             alert(JSON.stringify(res))
    //             // app.qrcode = false
    //             clearInterval(time)
    //         } else {
    //             // app.qrcode = true
    //         }
    //     })
    // }
</script>
